<template>
  <a-row type="flex" style="flex-flow: inherit;">
    <a-col :flex="toggle?'260px':'30px'" style="margin-right: 12px;background-color: #fff;">
      <depart-tree :rootOpened="true" :multi="false" @ok="getTreeData" @toggleBool="toggleBool" />
    </a-col>
    <a-col flex="auto">
      <a-card :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form-model layout="inline" ref="ruleForm" :model="queryParam">
            <z-form-item :datas="fieldArr" :form="queryParam" :gutter="8" :toggle="toggleSearchStatus">
              <a-col :span="6" slot="submit-action">
                <a-space :size="6">
                  <a-button type="primary" @click="onQuery" icon="search">查询</a-button>
                  <a-button @click="onResetForm" icon="reload">重置</a-button>
                </a-space>
              </a-col>
            </z-form-item>
          </a-form-model>
        </div>
      </a-card>
      <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <div>
            <a-button @click="handleModal">新建</a-button>
            <a-button>批量下载</a-button>
            <a-button>删除</a-button>
          </div>
        </div>
        <div>
          <a-row :gutter="[16,16]">
            <a-col :span="6">
              <a-card hoverable style="width: 100%">
                <template slot="actions" class="ant-card-actions">
                  <a>查看</a>
                  <a>下载</a>
                  <a>删除</a>
                </template>
                <a-card-meta title="Card title" description="This is the description">
                  <img
                    slot="avatar"
                    src="./poke.png"
                    style="width: 20%"
                  />
                </a-card-meta>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </a-card>
    </a-col>
    <manipulate ref="manipulate"></manipulate>
  </a-row>
</template>

<script>

import handleModal from '../../sjsk/modules/handleModal'
import departTree from './departTree'
import {listFor,listForm} from "@views/sjsk/modules/list";
import {documentList} from "@api/sjsk/archives";
import manipulate from "@views/system/help/manipulate";

export default {
  components: { departTree, handleModal,manipulate },
  mixins:[listFor,listForm],
  data() {
    return {
      toggle: true,
      selectKeys: [],
      queryParam: {},
      /* 查询折叠 */
      toggleSearchStatus:true,
      fieldArr: [
        {label: '名称', prop: 'suspectAccountName', tagType: 'input', span: 6},
      ],
    }
  },
  created() {},
  async mounted() {
    // this.onQuery()
    this.refreshTable()
  },
  methods: {
    onQuery() {
      console.log(this.queryParam)
    },


    refreshTable() {
      documentList().then(ser => {
        console.log(ser)
      }).catch(err => {

      })
    },
    modalFormOk() {},
    // 弹窗操作
    handleModal() {
      // alert(6)
      this.$refs.manipulate.show()
    },
    getTreeData(datas) {
      console.log(datas)
      // console.log(id)
    },
    toggleBool(bool) {
      console.log(bool)
      this.toggle = bool
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
</style>
